<template>
    <div class="w-full ">
        <!-- 搜索框 -->
        <div class="flex gap-4 mb-4">
            <el-button type="danger" size="large" @click="batchDelete">批量删除</el-button>
            <el-select v-model="searchData.productStatus" size="large" style="width: 240px" suffix-icon="CaretBottom">
                <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <div>
                <el-input v-model="searchData.productName" placeholder="请输入关键词搜索" size="large" style="width: 240px" />
                <el-button type="info" icon="Search" @click="search" size="large">搜索</el-button>
            </div>
        </div>
        <!-- 数据列表 -->
        <el-table ref="multipleTableRef" @selection-change="handleSelectionChange" :data="productDownloadList"
            header-row-class-name="orange-header" border style="margin: 20px 0;">
            <el-table-column type="selection" width="55" />
            <el-table-column label="商品">
                <template #default="scope">
                    <img :src="scope.row.productImg" alt="" style="width: 50px;height: 50px;">
                </template>
            </el-table-column>
            <el-table-column prop="productName" label="货号" />
            <el-table-column label="价格">
                <template #default="scope">
                    <p class="mt-1">发布价:￥<span class="text-red-800">{{scope.row.publishPrice}}</span></p>
                    <p class="mt-1"> 现价:￥<span class="text-red-800">{{scope.row.nowPrice}}</span></p>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="商品状态" />
            <el-table-column label="联系方式">
                <template #default="scope">
                    <div class="mb-2">
                        <i class="iconfont icon-QQ">{{ scope.row.qq }}</i>
                        <img src="@/assets/img/qq_chat.png">
                    </div>
                    <div class="mb-2">
                        <i class="iconfont icon-phone">
                            <template v-for="phone in scope.row.phones">{{ phone }}&nbsp;<br></template>
                        </i>
                    </div>
                    <div class="mb-2">
                        <i class="iconfont icon-dizhi">
                            <template v-for="(address,index) in scope.row.addresses">{{ address }}&nbsp;<br></template>
                        </i>
                    </div>


                </template>
            </el-table-column>
            <el-table-column prop="downTime" label="下载时间"></el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    <el-button type="warning" @click="handleComplaint(scope.$index, scope.row)">投诉</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="mt-8 flex justify-center">
            <el-pagination v-model:current-page="currentPage" :page-size="20" :total="pageTotal" prev-text="上一页"
                next-text="下一页" layout="prev, pager, next,total,jumper" @current-change="handleCurrentChange" />
        </div>
    </div>
    <!-- 投诉的弹框 -->
    <el-dialog v-model="dialogVisible" :title="title">
        <el-form :model="form">
            <el-form-item label="产品" :label-width="formLabelWidth">
                <el-input v-model="form.productName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="投诉类型" :label-width="formLabelWidth">
                <el-select v-model="form.complaintType">
                    <el-option v-for="item in complaintTypes" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="问题描述" :label-width="formLabelWidth">
                <el-input v-model="form.description" autocomplete="off" placeholder="请输入问题" type="textarea" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="saveComplaint">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref ,reactive,onMounted,} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
//加载json模拟数据
import loadLocalJson from "@/https/local/localJson.js";
//获取下载的商品信息
const productDownloadList = ref()
 const getDownloadGoods = async () => {
    await loadLocalJson("json/downloadManage/downProductsList.json").then((res) => {
        productDownloadList.value = res.data.list;
        pageTotal.value = res.data.total;
    });
}
//分页相关的数据
const currentPage = ref(1);
const pageTotal = ref(0);
const handleCurrentChange = (val) => {
    console.log(`current page: ${val}`);
    //todo 做分页查询
};

const searchData=reactive({
    productStatus:null,
    productName:null
})
const statusOptions = [
    { value: '商品状态', label: '商品状态' },
    { value: '供货中', label: '供货中' },
    { value: '已下架', label: '已下架' },
    { value: '已删除', label: '已删除' },
]
//todo 点击搜索按钮
const search=()=>{
    console.log("点击了搜索按钮",searchData)
}

const multipleTableRef = ref()
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
    multipleSelection.value = val
}
//todo删除
const handleDelete = (index, row) => {
    console.log(index, row)
    ElMessageBox.confirm(
        '是否删除商品?',
        '信息',
        {
            cancelButtonText: '取消',
            confirmButtonText: '删除',
            type: 'warning',
        }
    )
        .then(() => {
            //todo 调用后端接口删除
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}
//批量删除
const batchDelete = () => {
    //选择要删除的商品
    console.log(multipleSelection.value.map(item => item.id));
    if(multipleSelection.value.length === 0){
        return ElMessage({
            type: 'warning',
            message: '请选择要删除的商品',
        })
    }
    //todo 批量删除调用后端接口删除数据
    ElMessageBox.confirm('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        //todo 删除成功
        ElMessage({
            type: 'success',
            message: '删除成功',
        })
        //刷新数据
        getDownloadGoods()
    }).catch(()=> {})
}
//todo 投诉
const  dialogVisible = ref(false)
const title = ref('')
const formLabelWidth=ref('120px')
const  handleComplaint = (index,row) => {
    dialogVisible.value = true
    form.productId = row.productId
    form.productName = row.productName
    title.value = '投诉:' + row.productName
}
const form = reactive({
    productId: null,//产品id
    productName: '',//产品名称
    complaintType:'-1',//投诉类型
    description:''//问题描述
})
// 投诉类型
const complaintTypes=ref([])
const getComplaintTypes = async() => {
    await loadLocalJson("json/downloadManage/complaintType.json").then((res) => {
        complaintTypes.value = res.data
    });
    
}
//保存投诉信息
const saveComplaint = () => {

}

onMounted(async() => {
    await getDownloadGoods()
    await getComplaintTypes()
})
</script >
<style lang="less" scoped>

</style>
<style>
/* 表格整体背景色 */
.el-table {
    /* background-color: #666 !important; */
    /* 浅黄色背景 */
}

/* 表头样式 */
.orange-header th {
    background-color: #eee !important;
    /* 橘色背景 */
    color: #777 !important;
    /*文字颜色*/
}

/* 可选：hover效果 */
.el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #ffefd5 !important;
}
</style>